<template>
    <div>
        <!-- 头部 -->
        <header class="top" :class="{ active: !isTop }">
            <div class="left">左</div>
            <div class="midle">中</div>
            <div class="rigth">右</div>
        </header>

        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="1000" indicator-color="white">
            <van-swipe-item v-for="item in banner" :key="item.carouselUrl
            ">
                <img :src="item.carouselUrl
                " alt="">
            </van-swipe-item>
        </van-swipe>
        <!-- 宫格 -->
        <van-grid :column-num="5">
            <van-grid-item v-for="value in 10" :key="value" icon="photo-o" text="文字" />
        </van-grid>
        <!-- 新品上市 -->
        <Goods :dataItem="myNewGoodses">
            <template #title>
                <div>
                    <h2>新品上市</h2>
                </div>
            </template>
        </Goods>
        <!-- 热销产品 -->
        <Goods :data-item="myHotGoodses">
            <template #title>
                <div>
                    <h2>热销产品</h2>
                </div>
            </template>
        </Goods>
        <!-- 最新推荐 -->
        <Goods :data-item="myRecommendGoodse">
            <template #title>
                <div>
                    <h2>最新推荐</h2>
                </div>
            </template>
        </Goods>
    </div>
</template>
<script setup>
import { onMounted, ref, reactive } from 'vue'
import { getIndexInfo } from "../../api/index.js"
import Goods from "../../components/Goods.vue"
import { isTemplateNode } from '@vue/compiler-core';
let isTop = ref(true)
let banner = reactive([])
let myHotGoodses = reactive([])
let myNewGoodses = reactive([])
let myRecommendGoodse = reactive([])
onMounted(() => {
    window.addEventListener('scroll', changeTop)
    getData();
})
let changeTop = () => {
    let t = document.documentElement.scrollTop || document.body.scrollTop;
    if (t > 50) {
        isTop.value = false
    } else {
        isTop.value = true
    }
}
let getData = async () => {
    let { data: { carousels, hotGoodses, newGoodses, recommendGoodses }, resultCode } = await getIndexInfo();
    if (resultCode == 200) {
        banner.push(...carousels)
        myHotGoodses.push(...hotGoodses)
        myNewGoodses.push(...newGoodses)
        myRecommendGoodse.push(...recommendGoodses)
    }
}
</script>
<style lang="less" scoped>
.top {
    width: 100%;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    height: 50px;
    z-index: 200;

    .left {
        width: 50px;
    }

    .midle {
        flex: auto;
    }

    .rigth {
        width: 50px;
    }

    &.active {
        background: #1baeae;
    }
}

.van-swipe {
    width: 100%;
    height: auto;

    img {
        width: 100%;
        height: 100%;
    }
}

.van-grid {
    width: 100%;
}
</style>